<template>
  <div class="full-height bg-white content page-content">
    <ListSearch @onSubmit="searchTable" @clear="clearSearch"/>

    <q-table color="primary"
             :data="tableData"
             :columns="columns"
             :loading="isTableLoading"
             row-key="id"
             class="myTable scroll stick-last-col"
             :pagination.sync="pagination"
             :hide-bottom="!!tableData.length"
             ref="table">
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="arrow" :props="props">
            <q-btn
              v-if="props.row.overproduceSubWorkOrders.length > 0"
              dense round flat size="sm"
              :icon="props.row.expand ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"
              @click="toggleClick(props.row)"/>
          </q-td>
          <q-td key="workDate" :props="props">{{ props.row.workDate || '--' }}</q-td>
          <q-td key="deviceName" :props="props">{{ props.row.deviceName || '--' }}</q-td>
          <q-td key="deviceType" :props="props">{{ props.row.deviceType || '--' }}</q-td>
          <q-td key="shiftName" :props="props">{{ props.row.shiftName || '--' }}</q-td>
          <q-td key="overproduceCount" :props="props">{{ props.row.overproduceCount }}</q-td>
          <q-td key="ackStatus" :props="props">
            <div class="status"
                 :style="{'background': statusObj[props.row.ackStatus] ? statusObj[props.row.ackStatus].color : ''}"></div>
            {{ statusObj[props.row.ackStatus] ? statusObj[props.row.ackStatus].label : '--' }}
          </q-td>
          <q-td key="createTime" :props="props">{{ props.row.createTime || '--' }}</q-td>
          <q-td key="operations" class="operations" style="width: 100px">
            <div class="btn-group" style="text-align: center">
              <q-btn
                flat dense
                color="primary"
                :disable="props.row.maxOverCount <= 0"
                @click="showDialog(props.row)"
              >
                填报超产
              </q-btn>
            </div>
          </q-td>
        </q-tr>
        <template v-if="props.row.expand">
          <q-tr :props="props" v-for="(item, index) in props.row.overproduceSubWorkOrders" :key="index">
            <q-td colspan="100%">
              <div class="text-left flex" style="padding-left: 50px">
                <div class="margin-r-20">工单编号: {{ item.workOrderId }}</div>
                <div class="margin-r-20">产品编号: {{ item.productNumber }}</div>
                <div class="margin-r-20">产品名称: {{ item.productName }}</div>
                <div class="margin-r-20">超产数量: {{ item.overproduceCount }}</div>
                <div>报工人员: {{ item.operator }}</div>
              </div>
            </q-td>
          </q-tr>
        </template>
      </template>
      <template v-slot:body-cell-operations="props">
      </template>
    </q-table>
    <div style="width: 100%; padding-bottom: 20px;margin-top: 20px">
      <pagination style="position: relative;padding: 0 20px"
                  v-model="pagination.page"
                  :page-size="pagination.rowsPerPage"
                  :total="pagination.rowsNumber"
                  @changePage="onPageChange"
                  @changePageSize="onPageSizeChange">
      </pagination>
    </div>

    <FillOverDialog ref="fillOver" @success="getTableData"/>
  </div>
</template>

<script>
import ListSearch from './components/over-production/ListSearch'
import FillOverDialog from './components/over-production/FillOverDialog'
import Pagination from '../../components/pagination'
import { getOverproduceWorkOrders } from '../../boot/job/process-order'
import moment from 'moment'

export default {
  name: 'OverProduction',
  components: {
    ListSearch,
    Pagination,
    FillOverDialog
  },
  data () {
    return {
      tableData: [], // 列表数据源
      isTableLoading: false,
      columns: [
        {
          name: 'arrow',
          label: '',
          field: 'arrow',
          align: 'left',
          style: 'width: 5px;padding-right: 0'
        },
        {
          name: 'workDate',
          label: '生产日期',
          field: 'workDate',
          align: 'left'
        },
        {
          name: 'deviceName',
          label: '加工设备',
          field: 'deviceName',
          align: 'left'
        },
        {
          name: 'deviceType',
          label: '设备类型',
          field: 'deviceType',
          align: 'left'
        },
        {
          name: 'shiftName',
          label: '加工班次',
          field: 'shiftName',
          align: 'left'
        },
        {
          name: 'overproduceCount',
          label: '超产数量',
          field: 'overproduceCount',
          align: 'left'
        },
        {
          name: 'ackStatus',
          label: '状态',
          field: 'ackStatus',
          align: 'left'
        },
        {
          name: 'createTime',
          label: '创建时间',
          field: 'createTime',
          align: 'left'
        },
        {
          name: 'operations',
          field: 'operations',
          label: '操作',
          align: 'center'
        }
      ],
      // 表格分页配置
      pagination: {
        page: 1, // 当前页码
        rowsPerPage: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      queryParams: {
        ackStatus: null,
        devicesIds: null,
        shiftId: null,
        before: null,
        since: null,
        workshopId: null
      }
    }
  },
  created () {
    this.getTableData()
  },
  computed: {
    statusObj () {
      const obj = {}
      Object.entries(this.Enums.OVER_PRODUCTION_STATUS).forEach(entry => {
        obj[entry[1].value] = {
          label: entry[1].desc,
          color: entry[1].color
        }
      })
      return obj
    }
  },
  methods: {
    /**
     * 重置搜索条件
     */
    clearSearch () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
    },

    /**
     * 根据条件搜索
     * @param params
     */
    searchTable (params) {
      this.queryParams.ackStatus = params.status === 'all' ? null : params.status
      this.queryParams.shiftId = params.shift === 'all' ? null : params.shift
      this.queryParams.workshopId = params.workshop === 'all' ? null : params.workshop
      if (params.dateRange) {
        this.queryParams.since = moment(params.dateRange[0]).format('YYYY-MM-DD')
        this.queryParams.before = moment(params.dateRange[1]).format('YYYY-MM-DD')
      } else {
        this.queryParams.before = null
        this.queryParams.since = null
      }
      this.queryParams.devicesIds = params.devices.indexOf('all') > -1 ? null : params.devices
      this.getTableData()
    },

    /**
     * 查询表格数据
     */
    getTableData () {
      const params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        ...this.queryParams
      }
      this.isTableLoading = true
      getOverproduceWorkOrders(params).then(res => {
        const data = res.data
        this.tableData = data.list.map(item => {
          let overCountTotal = 0
          item.overproduceSubWorkOrders.forEach(o => {
            overCountTotal += o.overproduceCount
          })
          return {
            ...item,
            maxOverCount: item.overproduceCount - overCountTotal,
            createTime: moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
            expand: false
          }
        })
        this.pagination.rowsNumber = data.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },

    /**
     * 点击展开和收起
     * @param row
     */
    toggleClick (row) {
      row.expand = !row.expand
    },
    // 打开超产弹框
    showDialog (row) {
      this.$refs.fillOver.showDialog(row)
    },
    // 切换每夜显示条数
    onPageSizeChange (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getTableData()
    },

    // 切换页码
    onPageChange (val) {
      this.pagination.page = val
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
